<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新东方顶部导航菜单</title>
    <style>
        body,div,ul{padding: 0px;margin: 0px}
        li{list-style-type: none;display: inline-block;color:grey;}
        li img{padding:0px 3px 8px;}
        a{text-decoration: none}
        span{color:gray;border-right: 1px solid gray;padding: 0px 10px;line-height: 8px;}
    </style>
</head>
<body>
  <div style="width:650px;height:30px;border: 1px solid #d3d3d3;border-bottom: 1px dotted;background-color:#EEEEEE">
      <img src="./素材/img/logo.gif" style="display: inline-block;"/>
      <ul style="float:right;width:500px;margin-top:2.5px;margin-right:70px">
          <li><a href="#"><span>购物车</span></a></li>
          <li><a href="#"><span>优惠券</span></a></li>
          <li><a href="#"><span>快速注卡</span></a></li>
          <li><a href="#"><span>各地购课</span></a></li>
          <li><a href="#"><span>手机报</span></a></li>
          <li><a href="#"><span style="border-right:none">网站导航<img src="./素材/img/open_icon.gif"/> </span>
           </a>
          </li>
      </ul>
      <div style="border: 1px solid #d3d3d3;width:230px;height:180px;margin-left:330px;margin-top: -8px;background-color: white">
            <ul style="padding:10px 10px;">
                <li>托福</li>
                <li>雅思</li>
                <li>考研</li>
                <li>职称英语</li>
                <li>初中</li>
                <li>日语</li>
                <hr/>
                <li>网络课堂</li>
                <li>资讯中心</li>
                <li>知识堂</li>
                <li>大师讲坛</li>
                <li>学习论坛</li>
                <li>学词</li>
                <li>考研搜校</li>
                <hr/>
                <li>M-zone</li>
                <li>手机报</li>
                <li>时时英语</li>
            </ul>
      </div>
  </div>
</body>
</html>